﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Areas/Admin/Content/bui/build/css/dpl-min.css" rel="stylesheet" />
    <link href="~/Areas/Admin/Content/bui/build/css/bui-min.css" rel="stylesheet" />
    <link href="~/Areas/Admin/Content/bui/build/css/layout-min.css" rel="stylesheet" />
    <script src="~/Areas/Admin/Content/jquery-1.8.2.min.js"></script>
    <script src="~/Areas/Admin/Content/bui/build/bui-min.js"></script>
    <style type="text/css">
        .top {
            height: 45px;
            border: none;
            width: 100%;
            background-color: #438eb9;
        }

        .left {
            border-color: #4572a5;
        }
    </style>
</head>
<body>

    <script type="text/javascript">
        BUI.use(['bui/layout', 'bui/grid', 'bui/data', 'bui/tree'], function (Layout, Grid, Data, Tree) {
            var control = new Layout.Viewport({
                width: 600,
                height: 500,
                elCls: 'ext-border-layout',
                children: [{
                    layout: {
                        region: 'north',
                        height: 45
                    },
                    xclass: 'controller',
                    elCls: 'top',
                    content: '<iframe src="/Admin/Home/Top" frameborder="0" style="width: 100%; height: 100%" ></iframe>'
                }, {
                    xclass: 'controller',
                    layout: {
                        region: 'south',
                        fit: 'height',
                        height: 30
                    },
                    content: '<iframe src="/Admin/Home/Bottom" frameborder="0" style="width: 100%; height: 100%" ></iframe>'
                }, {
                    xclass: 'controller',
                    elCls: { "border-color": "#4572a5" },
                    content: '<iframe src="/Admin/Home/Menu" frameborder="0" style="width: 100%; height: 100%" ></iframe>',
                    layout: {
                        region: 'west',
                        fit: 'both', //height,width,both,none
                        width: 170
                    }
                }, {
                    xclass: 'controller',
                    layout: {
                        region: 'center',
                        fit: 'both'
                    },
                    id: 'center',
                    content: '<iframe id="centerFrame" src="/Admin/Home/Main" frameborder="0" style="width: 100%; height: 100%" ></iframe>'
                }],
                plugins: [Layout.Border]
            });
            control.render();
        });
    </script>
</body>
</html>
